Geolocation based Speedometer and Compass

DEMO

取得目前移動速度，以及指北針

實作

1. 同上篇，要取得瀏覽器定位功能所以要先啟動本地server

2. 監聽Web API 的地理位置變化事件

    const arrow = document.querySelector(".arrow");
    const speed = document.querySelector(".speed-value");
   
    navigator.geolocation.watchPosition(
        (position) => {
            speed.textContent = position.coords.speed;
            arrow.style.transform = `rotate(${position.coords.heading}deg)`;
        },
        (err) => {
            console.log(err);
            alert("Geolocation is not supported by this browser.");
        }
    );
   

總結

• 了解如何透過navigator.geolocation取得目前地理位址